<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template
                    v-for="(item, index) in $getBreadCrumbsName($route.path)"
                >
                    <ask-breadcrumb-item
                        :key="index"
                        v-if="item.path"
                        :to="'/' + item.path"
                        >{{ item.meta.title }}</ask-breadcrumb-item
                    >
                    <ask-breadcrumb-item :key="index" v-else>{{
                        item.meta.title
                    }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <div class="no-content">
            <div class="no-data">
                <el-input
                    placeholder=""
                    v-model="searchName"
                    @keyup.enter.native="handleSearch"
                    class="search-input"
                    clearable
                    size="large"
                >
                    <el-button slot="append" @click="handleSearch"
                        >全 镇 检 索</el-button
                    >
                </el-input>
            </div>
            <div class="resource-view">
                <div class="group">
                    <div v-for="(item, index) in dataList" :key="index">
                        <span>{{ item.name }}</span>
                        <ul>
                            <li v-for="(subItem, i) in item.children" :key="i">
                                <div @click="handleRouteJump(item, subItem)">
                                    <p :class="{ gray: !subItem.count }">
                                        {{ subItem.count }}
                                        <span v-if="subItem.name === '土地'"
                                            >(块)</span
                                        >
                                    </p>
                                    <span>{{ subItem.name }}</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { State } from "vuex-class";

@Component({
    name: "DataRetrievalIndexNotAlive"
})
export default class DataRetrievalIndexNotAlive extends Vue {
    @State(state => state.authArea) authArea: any;
    // 已选择检索条件的数组
    // 已存在的检索条件
    conditionList: any[] = [];
    dataList = [];
    searchName = "";

    mounted() {
        this.getSearchConditions();
    }

    // 获取检索条件以及统计数据
    async getSearchConditions() {
        const res = await this.$server["retrieval/getCondition"]({ data: {} });
        if (res.data.code === 200) {
            this.conditionList = res.data.data;
        }
        const resl = await this.$server["allResourceData/getResourceCount"]({
            data: {
                cityCode: this.authArea.cityCode
            }
        });
        if (resl.data.code === 200) {
            this.dataList = resl.data.data;
        }
    }

    handleRouteJump(item: any, subItem: any) {
        this.$router.push({
            name: "DataRetrievalList",
            query: {
                typeId: subItem.id,
                field: subItem.field,
                title: `${item.name}/${subItem.name}`
            }
        });
    }

    // 去列表搜索页面
    goToSearch() {
        this.$router.push({
            name: "DataRetrievalList"
        });
    }

    handlePush(item: any) {
        sessionStorage.setItem("list", JSON.stringify(item));
        this.$router.push({
            name: "DataRetrievalList"
        });
    }

    handleSearch() {
        this.$router.push({
            name: "SearchTask",
            query: {
                name: this.searchName
            }
        });
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        background: transparent !important;
        height: calc(100% - 50px) !important;
        overflow-y: hidden !important;
    }
}
* {
    margin: 0;
    box-sizing: border-box;
}

button {
    outline: none;
}

.no-content {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    flex-direction: column;
    .no-data {
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0;
        border-bottom: 10px solid #edeff2;

        .search-input {
            width: 880px;
            ::v-deep {
                .el-input__inner {
                    &:focus {
                        border-color: #dcdfe6;
                    }
                }
                .el-input-group__append {
                    background: #2c82c9;
                    color: #fff;
                    border-color: #2c82c9;
                    .el-button {
                        &:hover {
                            background: #2c82c9;
                            color: #fff;
                            border-color: #2c82c9;
                        }
                    }
                }
            }
        }
    }
}

.resource-view {
    display: flex;
    background-color: #ffffff;
    margin-top: 10px;
    overflow-y: auto;
    width: 100%;
    height: calc(100% - 80px);
    flex-direction: column;
    padding-bottom: 24px;
    & > p {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #37383a;
        width: 200px;
        padding-left: 18px;
        padding-top: 18px;
    }
    .group {
        display: flex;
        width: 100%;
        padding-left: calc((100% - 1164px) / 2);
        flex-direction: column;
        & > div {
            display: flex;
            align-items: center;
            & > span {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #37383a;
                width: 130px;
                padding-left: 44px;
                position: relative;
                &::before {
                    content: "";
                    display: block;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    position: absolute;
                    left: 24px;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
            ul {
                display: flex;
                width: calc(100% - 130px);
                flex-wrap: wrap;
                li {
                    width: calc(100% / 8);
                    height: 80px;
                    padding: 0 12px;
                    div {
                        height: 100%;
                        padding: 0 4px;
                        background: #ffffff;
                        border: 1px solid #ecebf2;
                        opacity: 1;
                        border-radius: 7px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        &:hover {
                            border: 1px solid #ffd1d1;
                            box-shadow: 0px 3px 7px rgba(253, 123, 123, 0.39);
                        }
                    }
                    p {
                        font-size: 28px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #37383a;
                        &.gray {
                            color: #ecebf2;
                        }
                    }
                    span {
                        font-size: 14px;
                        font-family: PingFang SC;
                        color: #909398;
                        margin-top: 6px;
                    }
                    &:nth-child(n + 10) {
                        margin-top: 12px;
                    }
                }
            }
            & + div {
                margin-top: 24px;
            }
            &:nth-child(3n + 1) span::before {
                background: #de2728;
            }
            &:nth-child(3n + 2) span::before {
                background-color: #32a78f;
            }
            &:nth-child(3n + 3) span::before {
                background-color: #eab846;
            }
        }
    }
}
</style>
